<!--
 * @Author: your name
 * @Date: 2022-01-24 16:21:18
 * @LastEditTime: 2022-01-24 17:26:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-ego\vue-ego\src\views\Goods\AddGoods.vue
-->
<template>
  <div class="add-goods">
      <!-- 面包屑 -->
      <div class="bread">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/goods' }">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </el-breadcrumb>
      </div>

    <!-- 带验证的表单 -->
    <div class="myform">
                <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类选择" prop="category">
            <el-button type="primary" v-model="goodsForm.category">分类选择</el-button>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
            <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
            <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
            <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点">
            <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="goodsForm.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
            <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="goodsForm.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" v-model="goodsForm.image">上传图片</el-button>
        </el-form-item>
        <el-form-item label="商品描述" prop="descs">
            <el-input type="textarea" v-model="goodsForm.descs"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        </el-form>
    </div>


    

  </div>
</template>

<script>
export default {
    name:'AddGoods',
     data() {
      return {
        goodsForm: {
          //表单容器-对象
            title: "", //商品名称
            price: "",
            num: "",
            sellPoint: "",
            image: "",
            descs: "",
            category: "", //商品类目
            date1: "", //商品时间
            date2: "", //商品时间
        },
        rules: {
         title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
            ],
            price: [{ required: true, message: "请输入价格", trigger: "blur" }],
            num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        }
      };
    },
}
</script>

<style lang="less" scoped>
.add-goods {
  margin: 20px;
}
.bread{
    background: #fff;
    padding: 10px;
    font-size: 18px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}
.myform{
    background: #fff;
    padding: 30px 10px;
}
</style>
